<template>
  <button @click="add">添加项目</button>
  <button @click="dec" :disabled="lists.length ==0">删除项目</button>
  <transition-group name="list" tag="ul" class="list">
    <li v-for="(item, index) in lists" :key=" item" class="listItem">
      {{ item }}(索引:{{ index }})
    </li>
  </transition-group>
</template>
<script setup>
import { ref } from "vue";
const lists = ref(["项目1", "项目2", "项目3"]);
let count = 3;//计数器
function add() {
  if (lists.value.length === 0) {
    // 如果列表为空，重置计数器从头开始
    count = 0;
  }
  count++;
  lists.value.push(`项目${count}`);
}
// 删除第一个项目
function dec() {
  if (lists.value.length > 0) {
    lists.value.shift(); // 使用shift()删除第一个元素
  }
}
</script>
<style scoped>
.list {
  list-style: none;
}
.listItem {
background-color: whitesmoke;
border: 2px solid #ddd;
margin-top: 20px;
margin-left: -39px;
}
.list-enter-from,
.list-enter-to {
  opacity: 0;
  transform: translatex(20px);
}
.list-enter-active,
.list-leave-active {
  transition: all 1s ease;
}
</style>